<template>
  <div class="tree">
    <div class="search-group" style="padding: 0; background: transparent">
      <div class="input-wrap" style="width: 100%">
        <div class="input-item" style="padding: 0; width: 100%">
          <a-input v-model="value" @pressEnter="onSearch" :maxLength="15" placeholder="请输入机关名称">
            <a-icon class="search-icon" slot="prefix" type="search" />
            <a-button @click="onSearch" slot="suffix" type="primary" class="searchBtn" style="margin-right: 0">
              搜索
            </a-button>
          </a-input>
        </div>
      </div>
    </div>

    <div id="treeList">
      <a-tree
        show-icon
        :show-line="true"
        :expandedKeys="expandedKeys"
        :tree-data="departTree"
        :defaultExpandParent="true"
        :auto-expand-parent="autoExpandParent"
        @select="onSelect"
        @expand="onExpand"
        :selectedKeys="selectedKeys"
        :replace-fields="replaceFields"
      >
        <a-icon slot="switcherIcon" type="down" />
        <template #title="{ unitName }">
          <span v-if="unitName.indexOf(value) > -1">
            {{ unitName.substr(0, unitName.indexOf(value)) }}
            <span style="color: #8beff2; background: #017f82">{{ value }}</span>
            {{ unitName.substr(unitName.indexOf(value) + value.length) }}
          </span>
          <span v-else>{{ unitName }}</span>
        </template>
      </a-tree>
    </div>
  </div>
</template>
<script>
import { getOneFlagTreeList } from '@/api/api'

export default {
  name: 'tree',
  data() {
    return {
      value: '',
      dataList: [],
      expandedKeys: [],
      selectedKeys: [],
      autoExpandParent: true,
      departTree: [],
      replaceFields: {
        key: 'id',
        title: 'unitName',
      },
    }
  },
  mounted() {
    this.expandedKeys = []
    this.loadTree()
  },
  methods: {
    loadTree() {
      this.departTree = []
      getOneFlagTreeList().then((res) => {
        if (res.code == 200) {
          for (let i = 0; i < res.result.length; i++) {
            let temp = res.result[i]
            this.departTree.push(temp)
          }
          sessionStorage.setItem('agencyId', this.departTree[0].id)
          this.$store.commit('is_AgencyId', this.departTree[0])
          this.selectedKeys.push(this.departTree[0].id)
          this.generateList(this.departTree)
        }
      })
    },

    generateList(tree) {
      for (let i = 0; i < tree.length; i++) {
        const node = tree[i]
        const id = node.id
        const unitName = node.unitName
        this.dataList.push({
          id,
          unitName,
        })
        if (node.children) {
          this.generateList(node.children)
        }
      }
    },

    getParentKey(key, tree) {
      let parentKey
      for (let i = 0; i < tree.length; i++) {
        const node = tree[i]
        if (node.children) {
          if (node.children.some((item) => item.id === key)) {
            parentKey = node.id
          } else if (this.getParentKey(key, node.children)) {
            parentKey = this.getParentKey(key, node.children)
          }
        }
      }
      return parentKey
    },

    onSearch() {
      const expanded = this.dataList
        .map((item) => {
          if (item.unitName.indexOf(this.value) > -1) {
            return this.getParentKey(item.id, this.departTree)
          }
          return null
        })
        .filter((item, i, self) => {
          if (item && self.indexOf(item) === i) {
            return item
          }
        })
      this.expandedKeys = expanded
      this.autoExpandParent = true
    },

    onSelect(selectedKeys, info) {
      // console.log(selectedKeys, info, 'selectedKeys, info')
      this.selectedKeys = selectedKeys
      let infoList = { ...info.node.dataRef, id: null, type: null } // 取消
      this.$store.commit('is_AgencyId', selectedKeys.length ? info.node.dataRef : infoList)
      this.$emit('onSelect', selectedKeys, info)
    },

    onExpand(selectedKeys, info) {
      this.$emit('onExpand', selectedKeys, info)
    },

    onExpand(keys) {
      console.log(keys, 'keys')
      this.expandedKeys = keys
      this.autoExpandParent = false
    },
  },
}
</script>

<style>
.ant-input-affix-wrapper .ant-input-suffix {
  right: -7 !important;
}
</style>
